<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue生命周期函数</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="life">
			
		</div>
		<script>
			var app = new Vue({
				el:"#life",
				template:"<div>{{test}}</div>",
				data:{
					test:"hello world"
				},
				beforeCreate:function(){
					console.log("创建之前");
				},
				created:function(){
					console.log("创建后");
				},
				beforeMount:function(){
					console.log(this.$el);
					console.log("模板和数据相结合绑定即将挂载的一瞬间之前")
				},
				mounted:function(){
					console.log(this.$el);
					console.log("挂载之后")
				},
				beforeDestroy:function(){
					console.log("销毁之前");
				},
				destroyed:function(){
					console.log("销毁后");
				},
				beforeUpdate:function(){
					console.log(this.$el);
					console.log("更新前")
				},
				updated:function(){
					console.log(this.$el);
					console.log("更新后")
				}
			})
		</script>
		<!--生命周期函数就是在Vue实例的某一个时间点自动执行的函数-->
		<!--生命周期示意图可以查看更多,一共11个-->
	</body>
</html>
